<template>
	<div class="page-container">
		<div class="user">
			<div class="user-header">
				<b-skeleton-wrapper class="user-header-cont" :loading="loading.info">
					<template #loading>
						<div ref="user_avatar">
							<b-skeleton class="user-header-avatar" type="avatar"></b-skeleton>
						</div>
						<div class="user-header-cont-name">
							<b-skeleton height="2rem" width="calc(79vw - 8.5rem)"></b-skeleton>
						</div>
					</template>
					
					<div class="user-header-cont" v-if="is_login">
						<div class="user-header-avatar" ref="user_avatar" @click="upload_avatar_click" :style="{backgroundImage: 'url(' + user.avatar + ')'}">
							<input type="file" name="file" ref="user_avatar_upload" accept="image/jpeg,image/png" @change="upload_avatar" />
						</div>
						<div class="user-header-cont-name">{{ user.username }}</div>
					</div>
					<div class="user-header-cont" style="cursor: pointer" @click="login" v-else>
						<div class="user-header-avatar" ref="user_avatar" :style="{backgroundImage: 'url(' + user.avatar + ')'}"></div>
						<div class="user-header-cont-name">
							<small>{{ user.username }}</small>
						</div>
					</div>
				</b-skeleton-wrapper>
			</div>
		</div>
		<div class="order-navbar">
			<div class="order-top-btn" @click="page_to('me-orders', true, {type: 'all'})">
				<p class="order-title">我的订单</p>
				<p class="order-all-btn">全部 <b-icon-chevron-compact-right /></p>
			</div>
			<div class="order-classify">
				<div class="order-classify-item" @click="page_to('me-orders', true, {type: 'all'})">
					<BIconCardList />
					<p>全部订单</p>
				</div>
				<div class="order-classify-item" @click="page_to('me-orders', true, {type: 'wait_for_paid'})">
					<b-badge class="order-classify-item-badge" pill variant="danger" v-if="order_state.wait_for_paid > 0">
						{{ order_state.wait_for_paid }}
					</b-badge>
					<BIconWallet2 />
					<p>待付款</p>
				</div>
				<div class="order-classify-item" @click="page_to('me-orders', true, {type: 'wait_for_delivered'})">
					<b-badge class="order-classify-item-badge" pill variant="danger" v-if="order_state.wait_for_delivered > 0">
						{{ order_state.wait_for_delivered }}
					</b-badge>
					<BIconTruck />
					<p>待发货</p>
				</div>
				<div class="order-classify-item" @click="page_to('me-orders', true, {type: 'wait_for_confirm'})">
					<b-badge class="order-classify-item-badge" pill variant="danger" v-if="order_state.wait_for_confirm > 0">
						{{ order_state.wait_for_confirm }}
					</b-badge>
					<BIconPencilSquare />
					<p>待确认</p>
				</div>
			</div>
		</div>
		<div class="me-navbar-block">
			<div class="me-navbar">
				<b-list-group class="me-navbar-list" flush>
					<b-list-group-item href="#" @click="page_to('me-address', true)">
						<b-icon-geo-alt />
						<p class="me-navbar-item-title">我的地址</p>
						<p class="me-navbar-right-icon"><b-icon-chevron-compact-right /></p>
					</b-list-group-item>
					<b-list-group-item href="#" @click="page_to('me-security', true)">
						<b-icon-shield-lock />
						<p class="me-navbar-item-title">修改密码</p>
						<p class="me-navbar-right-icon"><b-icon-chevron-compact-right /></p>
					</b-list-group-item>
					<b-list-group-item href="#" @click="about">
						<b-icon-info-circle />
						<p class="me-navbar-item-title">关于</p>
						<p class="me-navbar-right-icon"><b-icon-chevron-compact-right /></p>
					</b-list-group-item>
				</b-list-group>
			</div>
			<div class="me-logout" v-show="is_login">
				<b-button block variant="danger" @click="logout">退出登录</b-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		BIcon,
		BIconGeoAlt,
		BIconShieldLock,
		BIconInfoCircle,
		BIconCardList,
		BIconWallet2,
		BIconTruck,
		BIconPencilSquare,
		BIconChevronCompactRight
	} from 'bootstrap-vue'
	
	export default {
		name: 'Me',
		components: {
			BIcon,
			BIconGeoAlt,
			BIconShieldLock,
			BIconInfoCircle,
			BIconCardList,
			BIconWallet2,
			BIconTruck,
			BIconPencilSquare,
			BIconChevronCompactRight
		},
		inject: [
			'to_login',
			'refresh_token',
			'reload_view'
		],
		data() {
			return {
				is_login: false,
				loading: {
					info: true
				},
				user: {
					avatar: '/images/default-avatar.jpg',
					username: '点击登录'
				},
				order_state: {
					wait_for_paid: 0,
					wait_for_delivered: 0,
					wait_for_confirm: 0
				}
			}
		},
		created() {
			
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			login() {
				this.to_login()
			},
			logout(){
				this.refresh_token(null)
				this.reload_view()
			},
			getInfo() {
				this.$axios.get('/user/info').then((resp) => {
					if(resp.ret == 0) {
						this.is_login = true
						this.user.username = resp.data.user.username
						if(resp.data.user.avatar != null) 
							this.user.avatar = resp.data.user.avatar + "!100"
							
						this.order_state.wait_for_paid = resp.data.wait_for_paid
						this.order_state.wait_for_confirm = resp.data.wait_for_confirm
						this.order_state.wait_for_delivered = resp.data.wait_for_delivered
					}
					
					this.loading.info = false
				});
			},
			upload_avatar_click() {
				this.$refs.user_avatar_upload.click()
			},
			upload_avatar(e) {
				let file = e.target.files[0]
				if(file != undefined) {
					let param = new FormData()
					param.append('file', file)
					this.$axios.post('/user/avatar_upload', param, {headers: {'Content-Type': 'multipart/form-data'}}).then((resp) => {
						if(resp.ret == 0) {
							this.user.avatar = resp.data + "!100"
							
							this.loading.info = false
						}
					});
				}
			},
			page_to(name, need_login){
				if(!need_login || need_login && this.is_login) {
					this.$router.push({name: name, params: arguments[2]})
				} else this.$msg('请先登录')
			},
			about(){
				layer.open({
					title: false,
					closeBtn: false,
					sadeClose: false,
					btnAlign: 'c',
					btn: ['知道了'],
					content: '<p style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.9375rem">关于</p>' +
							 '<p style="font-size: 0.9375rem; color: #666">这个项目平平无奇，甚至没什么卵用</p>'
				})
			}
		}
	}
</script>

<style>
	.page-container {
		position: relative;
	}
	.user {
		position: relative;
		background: #fff;
		margin-bottom: 6.375rem;
	}
	.user-header {
		background-image: url(../../../public/images/user-bg.png);
		display: flex;
		padding-top: 0.0625rem;
		width: 100%;
		height: 15.625rem;
		align-content: center;
		background-color: #fd0;
		background-repeat: no-repeat;
		background-position: center right;
		background-size: auto 100%;
	}
	.user-header-cont {
		display: flex;
		margin: auto;
		margin-bottom: 5.625rem;
		width: 79%;
		align-items: center;
	}
	.user-header-avatar {
		display: block;
		cursor: pointer;
		margin-right: 1.875rem;
		width: 6.25rem;
		height: 6.25rem;
		border-radius: 50%;
		border: 0.1875rem solid #fff;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center right;
		background-size: auto 100%;
	}
	.user-header-avatar input {
		display: none;
	}
	.user-header-avatar img {
		min-width: 6.25rem;
		min-height: 6.25rem;
	}
	.user-header-cont-name {
		max-width: calc(79vw - 8.5rem);
		overflow-x: hidden;
		text-overflow: ellipsis;
		font-size: 2rem;
		padding: 1.25rem 0;
	}
	
	.order-navbar {
		position: absolute;
		left: 2.5%;
		bottom: -5rem;
		margin: auto;
		padding: 0.3125rem 1.25rem;
		width: 95%;
		box-shadow: 0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.05);
		font-size: 1.875rem;
		border-top: 0.0625rem solid #eee;
		border-radius: 0.3125rem;
		background: #fff;
	}
	.order-top-btn {
		cursor: pointer;
		height: 2.5rem;
		line-height: 2.5rem;
		border-bottom: 0.0625rem solid #eee;
	}
	.order-top-btn p {
		margin: 0;
	}
	.order-top-btn .order-title {
		float: left;
		font-size: 1.25rem;
	}
	.order-top-btn .order-all-btn {
		float: right;
		font-size: 0.9375rem;
	}
	
	.order-classify {
		height: 4.6875rem;
	}
	.order-classify-item {
		display: inline-block;
		width: 25%;
		height: 100%;
		text-align: center;
		font-size: 0.9375rem;
		padding-top: 0.9375rem;
		cursor: pointer;
		user-select: none;
	}
	.order-classify-item-badge {
		position: absolute;
		display: inline-block;
		margin-left: 0.9375rem;
		margin-top: -0.3125rem;
	}
	
	.me-navbar-block {
		position: absolute;
		left: 2.5%;
		width: 95%;
	}
	
	.me-navbar {
		box-shadow: 0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.05);
		font-size: 1.125rem;
		border-radius: 0.3125rem;
		margin-bottom: 0.9375rem;
	}
	.me-navbar-list {
		border-radius: 0.3125rem;
	}
	.me-navbar-item-title {
		display: inline-block;
		margin-left: 0.625rem;
		margin-bottom: 0;
	}
	.me-navbar-right-icon {
		display: inline-block;
		position: absolute;
		right: 0.75rem;
	}

	.me-logout {
		font-size: 1.125rem;
		border-radius: 0.3125rem;
	}
</style>
